<template>
  <div class="pageContainer">
    <h3 style="margin-bottom: 30px;">人力库</h3>
    <div style="max-width: 1270px;">
      <div style="display: flex;flex-wrap: wrap;margin-bottom: 16px;">
        <div class="fromItem">
          <div class="formLabel">用户编号:</div>
          <el-input placeholder="请输入编号" v-model="param.userId" class="inputStyle"></el-input>
        </div>
        <div class="fromItem">
          <div class="formLabel">称呼:</div>
          <el-input placeholder="请输入称呼" v-model="param.nickName" class="inputStyle"></el-input>
        </div>
        <div class="basicSearchLightBtn" style="margin-left: 40px;" @click="getTableData">
          <img src="@/assets/svg/white-search.svg" style="margin-right: 8px;" alt="">
          <div>查询</div>
        </div>
        <div class="basicSearchBtn" style="margin-left: 8px;" @click="reset">
          <img src="@/assets/svg/reset.svg" style="margin-right: 8px;" alt="">
          <div>重置</div>
        </div>
        </div>
    </div>
    <div style="margin-top:16px;">
      <el-table :data="tableData"   v-loading="loading"  fit>
        <el-table-column label="用户编号" prop="userId"></el-table-column>
        <el-table-column label="称呼" prop="nickName"></el-table-column>
        <el-table-column label="身高" prop="heightPeople"></el-table-column>
        <el-table-column label="体重" prop="weight"></el-table-column>
        <el-table-column label="血压" prop="bloodPressure"></el-table-column>
        <el-table-column label="血糖" prop="bloodSugar"></el-table-column>
        <el-table-column label="四肢情况" prop="limbs"></el-table-column>
        <el-table-column label="行动能力" prop="active"></el-table-column>
        <el-table-column label="听力" prop="listen"></el-table-column>
        <el-table-column label="关节炎" prop="articulation"></el-table-column>
        <el-table-column label="心脏病" prop="heart"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>

        <!-- <el-table-column label="操作" width="130px">
          <template slot-scope="{row}">
            <el-popconfirm v-if="row.status == 1" title="确定拉黑吗？" @onConfirm="handleSetBlack(row, 0)">
              <el-button slot="reference" type="text" class="warningColor" style="font-size: 14px;">拉黑</el-button>
            </el-popconfirm>
            <el-popconfirm v-else title="确定恢复吗？" @onConfirm="handleSetBlack(row, 1)">
              <el-button slot="reference" type="text" class="defaultTextColor">恢复</el-button>
            </el-popconfirm>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div>
      <el-pagination style="text-align: right;margin-top:20px;" @current-change="handleSizeChange" :current-page.sync="pageNo" :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
    <SetTag v-if="showSetTag" :id="selectInfo.id" :kind="selectInfo.kind" :tags="selectInfo.tags" @close="handleClose"></SetTag>
  </div>
</template>
<script>
import { getPeoplePage, setStatus } from "@/api/human";
import MoreInfo from './template/MoreInfo.vue'
import { getTagList } from "@/api/comman";
import SetTag from "@/components/SetTag/SetTag.vue";
export default {
  components: {
    SetTag,
    MoreInfo
  },
  name:"Human",
  data() {
    return {
      selectInfo: {},
      infoUserId: null,
      showSetTag: false,
      pageSize: 10,
      pageNo: 1,
      tableData: [],
      total: 0,
      param: {
        userId: null,
        nickNamenickName: null,
      },
      cityOption: [],
      loading:true
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleClose() {
      this.showSetTag = false
      this.getTableData()
    },
    handleShowTag(e) {
      this.selectInfo = {
        id: e.userId,
        tags: e.tags
      }
      this.showSetTag = true
    },
    handleSizeChange(e) {
      this.pageNum = e
      this.getTableData()
    },
    handleSetBlack(row, status) {
      const param = {
        userNo: row.userNo,
        kind: status,
      }
      setStatus(param).then(res => {
        if (res) {
          this.$message.success('操作成功')
          this.getTableData(true)
        }
      })
    },
    reset() {
      this.param = {
        userId: null,
        nickName: null
      }
      this.getTableData(true)
    },
    getTableData(init = false) {
      if (init) {
        this.pageNo = 1
      }
      this.loading = true;
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: this.param
      }
      getPeoplePage(requestParam).then(res => {
        if (res) {
          this.tableData = res.list
          this.total = res.count
        }
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      })
    },
  }
}
</script>
<style scoped lang="scss">
.el-dropdown-link {
  display: flex;
  align-items: center;
}
.dropdownClass {
  border-bottom: 1px solid #f2f2f2;
  height: 49px;
  align-items: center;
  display: flex;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  width: 120px;
}
.dropdownClass:last-of-type {
  border-bottom: none;
}
.pageContainer {
  margin: 0 32px;
  background: #ffffff;
  padding-top: 40px;
}

.fromItem {
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.inputStyle {
  width: 232px;
  ::v-deep.el-input__inner {
    color: #333333 !important;
  }
}

.formLabel {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 14px;
  margin-right: 8px;
  white-space: nowrap;
}

.searchBtn {
  width: 80px;
  height: 40px;
  background: #2a7eff;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 14px;
}
</style>
